<template>
    <div class="not-found">
        <div class="button" @click="backHome">返回首页</div>
    </div>
</template>
<script>
export default {
    methods: {
        backHome() {
            this.$router.push({ path: '/home' })
        }
    }
}
</script>
<style lang="scss" scoped>
.not-found {
    @include box_flex(
        $width: 100%,
        $height: 100%,
        $direction: row,
        $justify: center,
        $align: center
    );

    position: relative;
    background: url('~@/assets/images/bg-404.jpg') no-repeat;
    background-size: 100% 100%;
    .button {
        @include box_absolute(
            $width: auto,
            $height: auto,
            $bottom: 23%,
            $left: 23%,
            $zIndex: 1
        );
        @include background_color($color: primary);

        padding: 10px 30px;
        @include font_color($color: cover);

        border-radius: 10px;
        @include box_shadow($value: '0 0 5px 0', $color: 'primary');

        cursor: pointer;
        transition: all 0.3s;
        &:hover {
            @include background_color($color: primary-light1);
        }
    }
}
</style>
